import React from 'react';
import Avatar from '@material-ui/core/Avatar';

class Bubble extends React.Component {

  render() {

    const { text, me ,sender } = this.props;
    const root1 = {
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "flex-end"
    };
    const root2 = {
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "flex-start"
    };
    let left = {
      padding: 16,
      maxWidth:"50%",
      backgroundColor: "#fff",
      borderRadius: 10,
      boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
      float:"left",
      margin: 5,
      whiteSpace: "pre-wrap",
      wordWrap:"break-word",
      textAlign:"center"
    };
    let right = {
      padding: 16,
      maxWidth:"50%",
      backgroundColor: "#81D4FA",
      borderRadius: 10,
      boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
      float:"right",
      margin: 5,
      whiteSpace: "pre-wrap",
      wordWrap:"break-word",
      textAlign:"center"
    };
    return (
      <div style={me?root1:root2}>
        <Avatar style={{display:me?"none":"",margin:10}} >{sender}</Avatar>
        <div style={me ? right : left}>
          {text}
        </div>
        <Avatar style={{display:me?"":"none",margin:10}} >me</Avatar>
      </div>
    );
  }
}

export default Bubble;



